<template>
	<view class="content">
		<view class="user-info">
			<view class="icon">
				{{getFirstName}}
			</view>
			<view class="info">
				<view class="name">
					{{userInfo.nickname}}
				</view>
				<view class="dept">
					{{userInfo.deptName}}
				</view>
			</view>
		</view>
		<view class="check-info">
			<view class="check-record">
				<view class="item">
					<view class="title">
						上班{{checkInfo.beginTime}}
					</view>
					<view class="info">
						{{getCheckBeginTime}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						下班{{checkInfo.endTime}}
					</view>
					<view class="info">
						{{getCheckEndTime}}
					</view>
				</view>
			</view>
			<view class="check-btn">
				<view class="check-circle" @click="handleCheckIn">
					<view class="title">
						{{checkTypeList[checkTypeId]}}
					</view>
					<view class="time">
						<time-run></time-run>
					</view>
				</view>
				<view class="location">
					<button v-if="getLocationFail"
						type="primary"
						open-type="openSetting"
						>打开位置授权</button>
					<view v-else >
						<view @click="handleOpenLocation">
							当前位置：{{locationInfo}}
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TimeRun from '../../components/time-run.vue'
	import {checkPosition,checkIn,getBeginAndEndTime} from '@/api/user-api.js'
	export default {
		components:{
			TimeRun
		},
		data() {
			return {
				userInfo:{},
				getLocationFail:false,
				locationInfo:'当前位置信息',
				lat:0,//用于存储当前用户纬度
				lng:0,//用于存储当前用户经度
				checkTypeList:{
					"0":"上/下班打卡",//正常的上下班打卡按照时间是否过12点来分开
					"1":"迟到打卡",//只有在考勤范围内我们来确定是否是迟到，在范围内切过了上班时间
					"2":"早退打卡",//在范围内且没到下班时间并且过了中午
					"3":"外勤打卡"//如果不在考勤范围内我们就
				},
				checkTypeId:'0',
				checkInfo:{},
				checkBeginTime:'',
				checkEndTime:''
			}
		},
		onLoad() {

		},
		computed:{
			getFirstName(){
				if(this.userInfo.nickname){
					return this.userInfo.nickname.charAt(0)
				}else{
					return '未知'
				}
				
			},
			getCheckBeginTime(){
				return this.checkBeginTime?this.checkBeginTime+'已打卡':'暂无打卡记录'
			},
			getCheckEndTime(){
				return this.checkEndTime?this.checkEndTime+'已打卡':'暂无打卡记录'
			}
		},
		onShow() {
			// 因为当前页面被配置到了tabbar中相当于被keepalive缓存起来了，所以我们
			//只能子啊onShow生命周期中自定触发获取用户信息
			this.userInfo = uni.getStorageSync('userInfo')
			
			uni.getLocation({
				geocode:true,
				success:async (res)=>{
					console.log(res)
					this.getLocationFail = false
					this.lat = res.latitude
					this.lng = res.longitude
					this.$http({
						url:'https://apis.map.qq.com/ws/geocoder/v1/',
						method:'get',
						data:{
							location:`${res.latitude},${res.longitude}`,
							key:'PN2BZ-XWHW2-ZIAU7-CQW7K-LSY4J-WYBOO'
						}
					}).then(r => {
						if(r.data.status == 0){
							this.locationInfo = r.data.result.address
						}else{
							this.locationInfo = '获取位置信息失败请重新登陆'
						}
						
					})
					//判断当前是否在考勤范围内
					let r = await checkPosition({
						lat:this.lat,
						lng:this.lng
					})
					console.log(r.data)
					this.checkInfo = r.data.data
					if(r.data.code == 200){
						this.checkNow()
						
					}else{
						this.checkTypeId = '3'
					}
					//获取考勤记录
					await this.getCheckOut()
				},
				fail:()=>{
					this.getLocationFail = true
				}
			})
		},
		methods: {
			checkNow(){
				let d = new Date();
				let nowNum = d.getHours()*100+d.getMinutes()
				let beginTime = Number(this.checkInfo.beginTime.split(':')[0])*100+
					Number(this.checkInfo.beginTime.split(':')[1])
				let endTime = Number(this.checkInfo.endTime.split(':')[0])*100+
					Number(this.checkInfo.endTime.split(':')[1])
				console.log(nowNum,endTime,beginTime)
				if(nowNum>=beginTime&&nowNum<1200){
					this.checkTypeId = '1'
				}else if(nowNum>=1200&&nowNum<endTime){
					this.checkTypeId = '2'
				}else{
					this.checkTypeId = '0'
				}
			},
			async handleCheckIn(){
				console.log(1)
				let res = await checkIn({
					lat:this.lat,
					lng:this.lng
				})
				console.log(res.data)
				if(res.data.code == 200){
					uni.showToast({
						title:'打卡成功',
						icon:'success',
						mask:true,
						duration:2000
					})
					//更新打卡时间
					await this.getCheckOut()
				}
			},
			async getCheckOut(){
				let res = await getBeginAndEndTime()
				console.log(res.data)
				if(res.data.code == 200){
					this.checkBeginTime = res.data.data.beginTime
					this.checkEndTime = res.data.data.endTime
					console.log(this.checkBeginTime,this.checkEndTime)
				}
			},
			handleOpenLocation(){
				console.log(123)
				uni.openLocation({
					latitude:this.lat,
					longitude:this.lng,
					name:this.locationInfo
				})
			}
		}
	}
</script>

<style lang="scss" >
	page{
		background-color: #eee;
		height: 100%;
	}
	.content{
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.user-info{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		.icon{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			background-color: #2979FF;
			color: #fff;
			line-height: 100rpx;
			text-align: center;
			margin-right: 30rpx;
			
		}
		.info{
			.name{
				font-size: 40rpx;
				
			}
			.dept{
				font-size: 28rpx;
				color: #aaa;
			}
		}
	}
	.check-info{
		flex-grow: 1;
		margin-top: 30rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		.check-record{
			
			display: flex;
			.item{
				flex-grow: 1;
				background: #eee;
				margin: 0rpx 10rpx;
				border-radius: 9rpx;
				padding:10rpx 15rpx ;
				.info{
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		.check-btn{
			.check-circle{
				background-color: #2B85E4;
				color: #fff;
				width: 270rpx;
				height: 270rpx;
				border-radius: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(0,50,180,0.6);
				margin: auto;
				margin-top: 30rpx;
				.title{
					font-size: 40rpx;
					font-weight: bold;
				}
				.time{
					opacity: 0.5;
				}
				
			}
			.location{
				color: #666;
				font-size: 24rpx;
				text-align: center;
				margin-top: 30rpx;
			}
			
		}
	}
</style>
